Animate with the react-spring Library — Customize Spring Component

With the react-spring library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with react-spring.

Spring Component and Interpolation

We can use the Spring component to interpolate anything.

For example, we can write:

import React from "react";
import { Spring } from "react-spring/renderprops";

export default function App() {
  return (
    <div>
      <Spring
        from={{
          width: 100,
          padding: 0,
          background: "linear-gradient(to right, #30e8bf, #ff8235)",
          transform: "translate3d(400px,0,0) scale(2) rotateX(90deg)",
          boxShadow: "0px 100px 150px -10px #2D3747",
          borderBottom: "0px solid white",
          shape: "M20,380 L380,380 L380,380 L200,20 L20,380 Z",
          textShadow: "0px 5px 0px white"
        }}
        to={{
          width: "auto",
          padding: 20,
          background: "linear-gradient(to right, #009fff, #ec2f4b)",
          transform: "translate3d(0px,0,0) scale(1) rotateX(0deg)",
          boxShadow: "0px 10px 20px 0px rgba(0,0,0,0.4)",
          borderBottom: "10px solid #2D3747",
          shape: "M20,20 L20,380 L380,380 L380,20 L20,20 Z",
          textShadow: "0px 5px 15px rgba(255,255,255,0.5)"
        }}
      >
        {(props) => <div style={props}></div>}
      </Spring>
    </div>
  );
}

We have the from prop with the initial styles that we apply to the render props function’s div.

We also have the to prop with the styles that are applied when the animation is done.

props has the styles that are computed during the animation.

And we apply them by passing them into the style prop.

Spring Component Config

We can configure the Spring component with some preset values.

They include:

• config.default — { tension: 170, friction: 26 }
• config.gentle — { tension: 120, friction: 14 }
• config.wobbly — { tension: 180, friction: 12 }
• config.stiff — { tension: 210, friction: 20 }
• config.slow — { tension: 280, friction: 60 }
• config.molasses — { tension: 280, friction: 120 }

For example, we can write:

import React from "react";
import { config, Spring } from "react-spring/renderprops";

export default function App() {
  return (
    <div>
      <Spring config={config.wobbly} from={{ opacity: 0 }} to={{ opacity: 1 }}>
        {(props) => <div style={props}>hello</div>}
      </Spring>
    </div>
  );
}

to set the configuration with the config prop.

The following properties can be configured:

• mass — spring-mass, defaults to 1
• tension —spring energetic load, default value 170
• friction — spring resistance, default value 26
• clamp — when true, stops the spring once it overshoots its boundaries, defaults to false
• precision —precision, defaults to 0.01
• velocity — initial velocity, defaults to 0
• delay — delay, defaults to 0
• duration — if > than 0 will switch to a duration-based animation instead of spring physics, defaults to undefined
• easing —linear by default, you can use any easing you want, defaults value is t => t

We can configure it with our own object:

import React from "react";
import { Spring } from "react-spring/renderprops";

export default function App() {
  return (
    <div>
      <Spring
        config={{ tension: 0, friction: 2, precision: 0.1 }}
        from={{ opacity: 0 }}
        to={{ opacity: 1 }}
      >
        {(props) => <div style={props}>hello</div>}
      </Spring>
    </div>
  );
}

And we can configure it with our own function:

import React from "react";
import { config, Spring } from "react-spring/renderprops";

export default function App() {
  return (
    <div>
      <Spring
        to={{ opacity: 1, width: 100, backgroundColor: "red" }}
        config={(key) => (key === "width" ? config.slow : config.wobbly)}
        from={{ opacity: 0, width: 0, backgroundColor: "red" }}
      >
        {(props) => <div style={props}>hello</div>}
      </Spring>
    </div>
  );
}

We get the key from the styles and return the config based on that.

Conclusion

We can use the Spring component with various styles and config to customize our animation.